<template>
  <div>
    <div class="dis-nav">
        <router-link to="/tuijian">推荐</router-link>
        <router-link to="/paihangbang">排行榜</router-link>
        <router-link to="/gedan">歌单</router-link>
    </div>

    <!-- 这个区域不能写死 -->
    <!-- 子路由出口 -->
    <router-view />
    
  </div>
</template>

<script>
export default {}
</script>

<style>
.dis-nav {
    height: 25px;
    background-color: #f00;
    display: flex;
}
.dis-nav a.router-link-exact-active {
  color: #00f;
}
.dis-nav a {
    flex: 1;
    text-decoration: none;
    color: #fff;
}

img {
    width: 100vw;
    height: 100vh;
}
</style>
